<template>
  <div class="contain">
    <span class="start">
      <Item @active="first">首页</Item>
    </span>
    <span class="last">
      <Item @active="last">上一页</Item>
    </span>
    <span class="number" v-for="item in [1,2,3,4,5]" v-if="(item+curPage-1)*PageTotal<total">
      <Item @active="num(curPage+item)">{{ curPage + item }}</Item>
    </span>
    <span class="next">
      <Item @active="next">下一页</Item>
    </span>
    <span class="next">
      <Item @active="end">尾页</Item>
    </span>
    <span class="tip">
      <Item>当前{{ this.curPage }}页|共{{ this.total === 0 ? 1 : Math.ceil(this.total / this.PageTotal) }}页</Item>
    </span>
  </div>
</template>

<script>
import Item from "@/components/Item";

export default {
  name: "PageSelect",
  props: {
    total: {
      type: Number,
    },
    PageTotal: {
      type: Number,
    }
  },
  components: {
    Item,
  },
  data() {
    return {
      curPage: 1,
    }
  },
  methods: {
    first() {
      if (this.curPage === 1) return;
      this.curPage = 1;
      this.$emit("selectPage", 1);
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    end() {
      if (this.curPage * this.PageTotal > this.total) return;
      this.curPage = Math.ceil(this.total / this.PageTotal);
      this.$emit("selectPage", Math.ceil(this.total / this.PageTotal));
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    last() {
      if (this.curPage === 1) return;
      this.$emit("selectPage", --this.curPage);
      //跳转顶部，下同
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    next() {
      if (this.curPage * this.PageTotal > this.total) return;
      this.$emit("selectPage", ++this.curPage);
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    num(n) {
      if (this.curPage === n) return;
      this.$emit("selectPage", n);
      this.curPage = n;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
  }
}
</script>

<style scoped>

.contain {
  width: 100%;
  height: 100%;
}

.start {
  float: left;
  /*margin-left: 10%;*/
}

.last {
  float: left;
  margin-left: 10px;
}

.next {
  float: left;
  margin-left: 10px;
}

.number {
  float: left;
  margin-left: 10px;
}

.tip {
  float: right;
  margin-right: 10px;
}
</style>